<template>
 <div class="content">
	<div class="bottom_box">
		<div class="bottom_content">
			<div class="bottom_content_tit">训练记录</div>
			<div class="bottom_content_button_box">
				<div class="bottom_content_button_box_item" @click="changeDate">
					<div v-if="value1">{{getTime(value1)}}</div>
					<div  v-if="!value1">选择时间</div>
					<img   v-if="!value1" src="@/assets/image/collection/down.png" alt="">
					<div class="date_pick">
						<el-date-picker
							 ref="picker"
						     v-model="value1"
						     type="date"
						     placeholder="选择日期">
						   </el-date-picker>
					</div>
				</div>
				<el-dropdown  @command="handleCommand" trigger="click" placement="bottom-start">
				<div class="bottom_content_button_box_item">
					  <div>{{value2||"请选择"}}</div>
					  <img src="@/assets/image/collection/down.png" alt="">
					  <el-dropdown-menu slot="dropdown" style="width: 1.45rem;">
					    <el-dropdown-item :command="v" v-for="(v,n) in titarr" >{{v}}</el-dropdown-item>
				
					  </el-dropdown-menu>
					
				
				</div>
				</el-dropdown>
			</div>
			<div class="table">
				<div class="table_item">
					<div>名称</div>
					<div>类型</div>
					<div>操作</div>
				</div>
				<div class="table_item" v-for="v in 10" :class="{table_item_special:v%2!=0}">
					<div>练习题一名称练习题一名称练习题一名称练习题一名称练习题一名称练习题一名称</div>
					<div>练习题一名称练习题一名称练习题一名称练习题一名称</div>
					<div>
						<div>查看</div>
					</div>
				</div>
			</div>
			<div class="content_page">
				<div><<</div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>>></div>
			</div>
		</div>
	</div>

 </div>
</template>

<script>

import axios from "axios"
import qs from 'qs'

export default {
  name: 'floor',
  components:{
	  
  },
   data() {
 	return {
	 value1: '',
	 value2:'',
	 titarr:["haha","hahahah1","hahah2"]
	}
 },
		mounted(){
			// console.log()
		},
		beforeDestroy() {


		},
		 methods:{
			changeDate(){
				this.$refs['picker'].focus()
			},
			getTime(str){
				var month=str.getMonth()+1
				var year=str.getFullYear()
				var date=str.getDate()
				return year+"-"+month+"-"+date
			},
			handleCommand(command) {
				console.log(command)
			        // this.$message('click on item ' + command);
					this.value2=command
			      }
		 },


		 watch: {

		 }
	}
</script>
<style lang="less" scoped>
.bottom_box{
	padding: 0.34rem 0.56rem 0 0.56rem;
	.bottom_content{
		width: 100%;
		// height: 7.77rem;
		background: #FFFFFF;
		border-radius: 0.1rem;
		padding: 0.37rem 0.65rem 0.38rem 0.53rem;
		box-sizing: border-box;
		.bottom_content_tit{
			font-size: 0.21rem;
			color: #353535;
			margin-bottom: 0.21rem;
		}
		.bottom_content_button_box{
			height: 0.32rem;
			display: flex;
			align-items: center;
			margin-bottom: 0.14rem;
			& .bottom_content_button_box_item{
				cursor: pointer;
				width: 1.45rem;
				height: 0.32rem;
				background: #F1F4F8;
				border-radius: 0.16rem;
				padding: 0 0.16rem 0 0.22rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 0.12rem;
				position: relative;
				& div:nth-child(1){
					cursor: pointer;
					font-size: 0.14rem;
					color: #98A0A9;
				}
				& img{
					cursor: pointer;
					width: 0.12rem;
					height: 0.07rem;
				}
				& .date_pick{
					opacity: 0;
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					bottom: 0;
					&>.el-date-editor--date{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
				& .el-dropdown-menu{
					width: 1.45rem!important;
				}
			}
		}
	}
	.table{
		margin-bottom: 0.78rem;
		.table_item{
			min-height: 0.41rem;
			font-size: 0.14rem;
			color: #474747;
			line-height: 0.41rem;
			width: 100%;
			background: #E9EEF5;
			display: flex;
			
			&>div:nth-child(1){
				width: 19.18%;
				box-sizing: border-box;
				padding-left: 0.4rem;
				padding-right: 0.4rem;
			}
			&>div:nth-child(2){
				width: 71.72%;
				box-sizing: border-box;
				padding-right: 0.4rem;
			}
			&>div:nth-child(3){
				width: 9.1%;
				position: relative;
				&>div{
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 0.58rem;
					height: 0.23rem;
					border: 0.01rem solid #6BB1D9;
					border-radius: 0.03rem;
					box-sizing: border-box;
					font-size: 0.14rem;
					text-align: center;
					color: #6BB1D9;
					cursor: pointer;
					line-height: 0.23rem;
				}
			}
		}
		.table_item_special{
			background: white;
		}
	}
}
.content_page{
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	&>div{
		font-size: 0.14rem;
		color: #B7B7B7;
		margin: 0 0.36rem;
	}
}
</style>